<template>
  <div>
    <el-button type="success" @click="addEquipment">新增</el-button>
    <el-table
      :data="userlist"
      border
      style="width: 100%">
      <el-table-column
        prop="id"
        label="id"
        width="120">
      </el-table-column>
      <el-table-column
        prop="p_name"
        label="姓名"
        width="120">
      </el-table-column>
      <el-table-column
        prop="email"
        label="邮件"
        width="120">
      </el-table-column>
      <el-table-column
        prop="age"
        label="年龄"
        width="120">
      </el-table-column>
      <el-table-column
        prop="性别"
        label="地址"
        width="300">
      </el-table-column>
      <el-table-column
        prop="balance"
        label="余额"
        width="120">
      </el-table-column>
      <el-table-column
        prop="phone"
        label="联系方式"
        width="120">
      </el-table-column>
      <el-table-column
        prop="password"
        label="密码"
        width="120">
      </el-table-column>

      <el-table-column

        label="操作"
        width="200">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">修改</el-button>
          <el-button  @click.native.prevent="deleteRow(scope.$index,userlist,scope.row)" type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="params.page"
      :page-sizes="[1,5,10,20]"
      :page-size="params.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>

    <div>
      <el-dialog :title="dialogStatus" :visible.sync="dialogFormVisible">
        <el-form :model="user">
          <el-form-item v-show="false" label="id" :label-width="formLabelWidth" >
            <el-input v-model="user.id" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="邮箱" :label-width="formLabelWidth">
            <el-input v-model="user.email"></el-input>
          </el-form-item>
          <el-form-item label="用户名" :label-width="formLabelWidth">
            <el-input v-model="user.u_name" ></el-input>
          </el-form-item>
          <el-form-item label="年龄" :label-width="formLabelWidth">
            <el-input v-model="user.age"></el-input>
          </el-form-item>
          <el-form-item label="性别" :label-width="formLabelWidth">
            <el-input v-model="user.gender"></el-input>
          </el-form-item>

          <el-form-item label="联系方式" :label-width="formLabelWidth">
            <el-input v-model="user.phone" ></el-input>
          </el-form-item>
          <el-form-item label="密码" :label-width="formLabelWidth">
            <el-input v-model="user.password"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="submit">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>

</template>

<script>
  import axios from 'axios'
  //import { Message } from 'element-ui'

  export default {
    name: "",
    data() {
      return {
        dialogStatus:'',
        userlist: []
        ,
        params: {
          page: 1,
          size: 5
        },
        total: 100,
        dialogFormVisible: false,
        user: {
          email:'',
          u_name:'',
          password:'',
          age:'',
          gender:'',
          phone:''
        },
        formLabelWidth: '120px'
        ,
        loading: false,

        page:1,
        size:5
      }
    },
    methods: {
      deleteRow(index, rows,row) {


        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          axios.post("api/user/del",{"id":row.id}).then(res=>{
            rows.splice(index, 1);
            console.log("del");
          })
          //axios.delete()
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });



      },
      submit() {
        axios.post("api/user/add", this.user).then(res => {
          if (res.data.code == 200) {
            this.$message(res.data.mgs);
            this.dialogFormVisible = false;
          }
        })
      },
      findall(page,size) {
        axios.post("api/user/findAll",{page:page,size:size}).then(res => {

          this.userlist = res.data.data;
          this.total=res.data.total;
        })
      },
      handleClick(row) {
        console.log(row);
        this.dialogFormVisible = true;
        //编辑弹框标题
        this.user.id=row.id;
        this.user.p_name=row.p_name;
        this.user.p_name=row.p_name;
        this.user.age=row.age;
        this.user.email=row.email;
        this.user.gender=row.gender;
        this.user.password=row.password;
        this.user.balance=row.balance;
        this.user.phone=row.phone;
        this.dialogStatus = "修改"
      },
      handleSizeChange(val) {
        console.log(val);
        this.size=val;
        this.findall(this.page,val)

      },
      handleCurrentChange(val) {
        this.page=val;
        this.findall(val,this.size);
      },
      addEquipment() {
        //显示弹框
        this.dialogFormVisible = true;
        //新增弹框标题
        this.dialogStatus = "新增";
      },
      //编辑
      handelEdit() {
        //显示弹框
        this.dialogFormVisible = true;
        //编辑弹框标题
        this.dialogStatus = "editEquipent"
      },
      handleRemove(file, fileList) {
        this.uploadPicUrl = "";
      },
      handleExceed(files, fileList) {
        this.$message.warning(
          `当前限制选择 4 张图片，如需更换，请删除上一张图片在重新选择！`
        );
      },
      beforeAvatarUpload(file,response) {   //图片上传之前的方法
        // const isPNG = file.type === "image/png";
        // const isJPEG = file.type === "image/jpeg";
        // const isJPG = file.type === "image/jpg";
        // const isLt2M = file.size / 1024 / 1024 < 2;

        // if (!isPNG && !isJPEG && !isJPG) {
        //   this.$message.error("上传头像图片只能是 jpg、png、jpeg 格式!");
        //   return false;
        // }
        // if (!isLt2M) {
        //   this.$message.error("上传头像图片大小不能超过 2MB!");
        //   return false;
        // }
        this.QiniuData.data = file;
        //this.QiniuData.key = `${file.name}`;
        console.log(this.QiniuData.key)
      },
      uploadSuccess(response, file, fileList) {  //图片上传成功的方法
        //console.log(fileList);
        //console.log(response);
        //console.log(file);
        this.uploadPicUrl = `${this.qiniuaddr}/${response.key}`;
        //console.log(this.uploadPicUrl);
        this.fileList.push({url:this.uploadPicUrl});
        //console.log(this.fileList[0].url+"dddddddddddddd");
      },
      uploadError(err, file, fileList) {    //图片上传失败时调用
        this.$message({
          message: "上传出错，请重试！",
          type: "error",
          center: true
        });
      },
      beforeRemove(file, fileList) {
        // return this.$confirm(`确定移除 ${ file.name }？`);
      },
      //提交数据到后台
      handleSubmit() {

      },
      //请求后台拿七牛云token
      getQiniuToken() {  //token
        axios.get("api/user/gettoken").then(res=>{
          this.QiniuData.token=res.data.data;
        })
        //console.log(uploadtoken);
        //this.QiniuData.token= uploadtoken.data.token
      }
    },
    mounted() {
      this.findall(this.page,this.size);
      this.getQiniuToken();

    }
  }
</script>

<style scoped>

</style>
